<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">






  
  
  <link rel="stylesheet" media="all" href="/blog/lib/Han/dist/han.min.css?v=3.3">




<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/blog/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="读书笔记," />








  <link rel="shortcut icon" type="image/x-icon" href="/blog/favicon.ico?v=5.1.2" />






<meta name="description" content="JavaScript NoteJavaScript是什么 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。JavaScript可以做什么 写入 HTML 输出 对事件作出反应 改变 HTML 内容">
<meta name="keywords" content="读书笔记">
<meta property="og:type" content="article">
<meta property="og:title" content=" JavaScript笔记">
<meta property="og:url" content="https://git.oschina.net/choichumgming/blog/2017/10/19/JavaScript笔记/index.html">
<meta property="og:site_name" content="choichumgming&#39;s blog">
<meta property="og:description" content="JavaScript NoteJavaScript是什么 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。JavaScript可以做什么 写入 HTML 输出 对事件作出反应 改变 HTML 内容">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://www.w3school.com.cn/i/ct_htmltree.gif">
<meta property="og:updated_time" content="2017-12-26T08:35:46.089Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content=" JavaScript笔记">
<meta name="twitter:description" content="JavaScript NoteJavaScript是什么 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。JavaScript可以做什么 写入 HTML 输出 对事件作出反应 改变 HTML 内容">
<meta name="twitter:image" content="http://www.w3school.com.cn/i/ct_htmltree.gif">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/blog/',
    scheme: 'Gemini',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://git.oschina.net/choichumgming/blog/2017/10/19/JavaScript笔记/"/>





  <title> JavaScript笔记 | choichumgming's blog</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blog/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">choichumgming's blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">stay foolish,stay hard</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/blog/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/blog/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-commonweal">
          <a href="/blog/404.html" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-heartbeat"></i> <br />
            
            公益404
          </a>
        </li>
      
        
        <li class="menu-item menu-item-board">
          <a href="/blog/board/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-book"></i> <br />
            
            留言
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://git.oschina.net/choichumgming/blog/blog/2017/10/19/JavaScript笔记/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="choichumgming">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="choichumgming's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline"> JavaScript笔记</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-10-19T17:58:49+08:00">
                2017-10-19
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/前端相关/" itemprop="url" rel="index">
                    <span itemprop="name">前端相关</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
              <span class="post-meta-divider">|</span>
              <span class="post-meta-item-icon">
                <i class="fa fa-comment-o"></i>
              </span>
              
                <a href="/blog/2017/10/19/JavaScript笔记/#SOHUCS" itemprop="discussionUrl">
                  <span id="changyan_count_unit" class="post-comments-count hc-comment-count" data-xid="2017/10/19/JavaScript笔记/" itemprop="commentsCount"></span>
                </a>
              
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body han-init-context" itemprop="articleBody">

      
      

      
        <h1 id="JavaScript-Note"><a href="#JavaScript-Note" class="headerlink" title="JavaScript Note"></a>JavaScript Note</h1><h2 id="JavaScript是什么"><a href="#JavaScript是什么" class="headerlink" title="JavaScript是什么"></a>JavaScript是什么</h2><ul>
<li>JavaScript 是脚本语言</li>
<li>JavaScript 是一种轻量级的编程语言。</li>
<li>JavaScript 是可插入 HTML 页面的编程代码。</li>
<li>JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。</li>
<li>JavaScript 很容易学习。<h2 id="JavaScript可以做什么"><a href="#JavaScript可以做什么" class="headerlink" title="JavaScript可以做什么"></a>JavaScript可以做什么</h2></li>
<li>写入 HTML 输出</li>
<li>对事件作出反应</li>
<li>改变 HTML 内容</li>
<li>改变 HTML 图像</li>
<li>改变 HTML 样式</li>
<li>验证输入<h2 id="JavaScript-怎么使用"><a href="#JavaScript-怎么使用" class="headerlink" title="JavaScript 怎么使用"></a>JavaScript 怎么使用</h2></li>
<li>HTML 中的脚本必须位于 <script> 与 </script> 标签之间。</li>
<li>脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。<br><br></head></body></li>
<li>那些老旧的实例可能会在 <code>&lt;script&gt;</code>标签中使用 type=”text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。<br><br></li>
<li>您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。<br><br></li>
<li>也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 <code>&lt;script&gt;</code>标签的 “src” 属性中设置该 .js 文件<br><br></li>
<li>在 <code>&lt;head&gt;</code>或 <code>&lt;body&gt;</code> 中引用脚本文件都是可以的。实际运行效果与在 <code>&lt;script&gt;</code>标签中编写脚本完全一致。<br><code>提示：外部脚本不能包含 &lt;script&gt; 标签。</code><h2 id="JavaScript-语句"><a href="#JavaScript-语句" class="headerlink" title="JavaScript 语句"></a>JavaScript 语句</h2><code>警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖</code><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;body&gt;</div><div class="line"></div><div class="line">&lt;h1&gt;我的第一张网页&lt;<span class="regexp">/h1&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;p&gt;我的第一个段落。&lt;/</span>p&gt;</div><div class="line"></div><div class="line">&lt;button onclick=<span class="string">"myFunction()"</span>&gt;点击这里&lt;<span class="regexp">/button&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;script&gt;</span></div><div class="line"><span class="regexp">function myFunction()</span></div><div class="line"><span class="regexp">&#123;</span></div><div class="line"><span class="regexp">document.write("糟糕！文档消失了。");</span></div><div class="line"><span class="regexp">&#125;</span></div><div class="line"><span class="regexp">&lt;/</span>script&gt;</div><div class="line"></div><div class="line">&lt;<span class="regexp">/body&gt;</span></div><div class="line"><span class="regexp">&lt;/</span>html&gt;</div></pre></td></tr></table></figure>
</li>
</ul>
<p><code>提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。</code></p>
<h2 id="JavaScript-数据类型"><a href="#JavaScript-数据类型" class="headerlink" title="JavaScript 数据类型"></a>JavaScript 数据类型</h2><p>字符串、数字、布尔、数组、对象、Null、Undefined</p>
<ul>
<li>JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型</li>
<li>Undefined 这个值表示变量不含有值。</li>
<li>可以通过将变量的值设置为 null 来清空变量<h2 id="JavaScript-对象"><a href="#JavaScript-对象" class="headerlink" title="JavaScript 对象"></a>JavaScript 对象</h2>JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。<br>在 JavaScript 中，对象是拥有属性和方法的数据。</li>
<li>在 JavaScript 中，对象是数据（变量），拥有属性和方法</li>
<li>JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。<h2 id="JavaScript-函数"><a href="#JavaScript-函数" class="headerlink" title="JavaScript 函数"></a>JavaScript 函数</h2>函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。<h2 id="JavaScript-变量"><a href="#JavaScript-变量" class="headerlink" title="JavaScript 变量"></a>JavaScript 变量</h2><h3 id="局部-JavaScript-变量"><a href="#局部-JavaScript-变量" class="headerlink" title="局部 JavaScript 变量"></a>局部 JavaScript 变量</h3></li>
<li>在 JavaScript <code>函数内部声明</code>的变量（使用 var）是局部变量，所以只能在<code>函数内部</code>访问它。（该变量的<code>作用域</code>是<code>局部</code>的）。</li>
<li>可以在不同的函数中使用名称相同的局部变量，因为<code>只有声明过该变量的函数才能识别出该变量</code>。</li>
<li>只要函数运行完毕，本地变量就会被删除。<br>###全局 JavaScript 变量</li>
<li>在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。<h3 id="JavaScript-变量的生存期"><a href="#JavaScript-变量的生存期" class="headerlink" title="JavaScript 变量的生存期"></a>JavaScript 变量的生存期</h3></li>
<li>JavaScript 变量的生命期从它们被声明的时间开始。</li>
<li>局部变量会在函数运行以后被删除。</li>
<li>全局变量会在页面关闭后被删除。<h3 id="向未声明的-JavaScript-变量来分配值"><a href="#向未声明的-JavaScript-变量来分配值" class="headerlink" title="向未声明的 JavaScript 变量来分配值"></a>向未声明的 JavaScript 变量来分配值</h3></li>
<li>如果把值赋给尚·未声明的变量·，该变量将被·自动·作为·全局·变量声明。<h2 id="JavaScript-表单验证"><a href="#JavaScript-表单验证" class="headerlink" title="JavaScript 表单验证"></a>JavaScript 表单验证</h2>JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。<br>JavaScript 表单验证<br>JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。<blockquote>
<p>HTML 表单包含表单元素。<br>表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。</p>
</blockquote>
</li>
</ul>
<p>被 JavaScript 验证的这些典型的表单数据有：<br>用户是否已填写表单中的必填项目？<br>用户输入的邮件地址是否合法？<br>用户是否已输入合法的日期？<br>用户是否在数据域 (numeric field) 中输入了文本？</p>
<h2 id="JavaScript-HTML-DOM"><a href="#JavaScript-HTML-DOM" class="headerlink" title="JavaScript HTML DOM"></a>JavaScript HTML DOM</h2><p>当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。<br>HTML DOM 模型被构造为对象的树。<br><img src="http://www.w3school.com.cn/i/ct_htmltree.gif" alt="HTML DOM 树"><br>通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。</p>
<ul>
<li>JavaScript 能够改变页面中的所有 HTML 元素</li>
<li>JavaScript 能够改变页面中的所有 HTML 属性</li>
<li>JavaScript 能够改变页面中的所有 CSS 样式</li>
<li>JavaScript 能够对页面中的所有事件做出反应</li>
</ul>
<h3 id="如何查找-HTML-元素"><a href="#如何查找-HTML-元素" class="headerlink" title="如何查找 HTML 元素"></a>如何查找 HTML 元素</h3><p>通常，通过 JavaScript，您需要操作 HTML 元素。<br>为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：</p>
<ul>
<li>通过 <strong>d </strong>找到 HTML 元素</li>
<li>通过 <strong>标签名 </strong>找到 HTML 元素</li>
<li>通过 <strong>类名 </strong>找到 HTML 元素<h3 id="如何改变-HTML-元素的内容-innerHTML"><a href="#如何改变-HTML-元素的内容-innerHTML" class="headerlink" title="如何改变 HTML 元素的内容 (innerHTML)"></a>如何改变 HTML 元素的内容 (innerHTML)</h3>HTML DOM 允许 JavaScript 改变 HTML 元素的内容。</li>
<li><p>改变 HTML 输出流<br>JavaScript 能够创建动态的 HTML 内容：<br>在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。</p>
<blockquote>
<p>所谓的输出流，就是HTML渲染页面，实现输出的过程。HTML的加载过程是由上至下的，当遇到js脚本时，页面加载会被阻塞，浏览器会先去下载js脚本，当js脚本运行完之后，再继续渲染页面。而当页面已经加载完成后，再通过js写入HTML输出流时，页面会重新加载，此时之前已经加载的东西会全部消失，只加载js中的内容。</p>
</blockquote>
</li>
<li><p>改变 HTML 内容<br>修改 HTML 内容的最简单的方法时使用 innerHTML 属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">&lt;html&gt;</div><div class="line">&lt;body&gt;</div><div class="line"></div><div class="line">&lt;p id=<span class="string">"p1"</span>&gt;Hello World!&lt;/p&gt;</div><div class="line"></div><div class="line">&lt;script&gt;</div><div class="line"><span class="built_in">document</span>.getElementById(<span class="string">"p1"</span>).innerHTML=<span class="string">"New text!"</span>;</div><div class="line">&lt;<span class="regexp">/script&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;/</span>body&gt;</div><div class="line">&lt;<span class="regexp">/html&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>改变 HTML 属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;body&gt;</div><div class="line"></div><div class="line">&lt;img id=<span class="string">"image"</span> src=<span class="string">"smiley.gif"</span>&gt;</div><div class="line"></div><div class="line">&lt;script&gt;</div><div class="line"><span class="built_in">document</span>.getElementById(<span class="string">"image"</span>).src=<span class="string">"landscape.jpg"</span>;</div><div class="line">&lt;<span class="regexp">/script&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;/</span>body&gt;</div><div class="line">&lt;<span class="regexp">/html&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="如何改变-HTML-元素的样式-CSS"><a href="#如何改变-HTML-元素的样式-CSS" class="headerlink" title="如何改变 HTML 元素的样式 (CSS)"></a>如何改变 HTML 元素的样式 (CSS)</h3><p>HTML DOM 允许 JavaScript 改变 HTML 元素的样式。</p>
<ul>
<li>改变 HTML 样式<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;body&gt;</div><div class="line">&lt;p id=<span class="string">"p2"</span>&gt;Hello World!&lt;/p&gt;</div><div class="line">&lt;h1 id=<span class="string">"id1"</span>&gt;My Heading <span class="number">1</span>&lt;<span class="regexp">/h1&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;button type="button" onclick="document.getElementById('id1').style.color='red'"&gt;</span></div><div class="line"><span class="regexp">点击这里</span></div><div class="line"><span class="regexp">&lt;/</span>button&gt;<span class="comment">//改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：</span></div><div class="line"></div><div class="line">&lt;script&gt;</div><div class="line"><span class="built_in">document</span>.getElementById(<span class="string">"p2"</span>).style.color=<span class="string">"blue"</span>;<span class="comment">//会改变 &lt;p&gt; 元素的样式</span></div><div class="line">&lt;<span class="regexp">/script&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;/</span>body&gt;</div><div class="line">&lt;<span class="regexp">/html&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="如何对-HTML-DOM-事件对做出反应"><a href="#如何对-HTML-DOM-事件对做出反应" class="headerlink" title="如何对 HTML DOM 事件对做出反应"></a>如何对 HTML DOM 事件对做出反应</h3><p>HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。</p>
<ul>
<li>对事件做出反应<br>我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。<br>HTML 事件的例子：<br>– 当用户点击鼠标时<br>– 当网页已加载时<br>– 当图像已加载时<br>– 当鼠标移动到元素上时<br>– 当输入字段被改变时<br>– 当提交 HTML 表单时<br>– 当用户触发按键时<br><br></li>
<li>HTML 事件属性<br>如需向 HTML 元素分配 事件，您可以使用事件属性。</li>
<li>使用 HTML DOM 来分配事件<br>HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;body&gt;</div><div class="line"></div><div class="line">&lt;script&gt;</div><div class="line"><span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>).onclick=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;displayDate()&#125;;</div><div class="line">&lt;<span class="regexp">/script&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;/</span>body&gt;</div><div class="line">&lt;<span class="regexp">/html&gt;</span></div></pre></td></tr></table></figure>
<ul>
<li>onload 和 onunload 事件<code>这个内容看的不是很懂</code><br>onload 和 onunload 事件会在用户进入或离开页面时被触发。<br>onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。<br>onload 和 onunload 事件可用于处理 cookie。<br></li>
<li><p>onchange 事件<br>onchange 事件常结合对输入字段的验证来使用。<br>下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;body&gt;</div><div class="line">&lt;input type=<span class="string">"text"</span> id=<span class="string">"fname"</span> onchange=<span class="string">"upperCase()"</span>&gt;</div><div class="line">&lt;<span class="regexp">/body&gt;</span></div><div class="line"><span class="regexp">&lt;/</span>html&gt;</div></pre></td></tr></table></figure>
</li>
<li><p>onmouseover 和 onmouseout 事件<br>onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。</p>
</li>
<li>onmousedown、onmouseup 以及 onclick 事件<br>onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。<h3 id="如何添加或删除-HTML-元素"><a href="#如何添加或删除-HTML-元素" class="headerlink" title="如何添加或删除 HTML 元素"></a>如何添加或删除 HTML 元素</h3></li>
<li><p>创建新的 HTML 元素<br>如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;body&gt;</div><div class="line"></div><div class="line">&lt;div id=<span class="string">"div1"</span>&gt;</div><div class="line">&lt;p id=<span class="string">"p1"</span>&gt;这是一个段落&lt;<span class="regexp">/p&gt;</span></div><div class="line"><span class="regexp">&lt;p id="p2"&gt;这是另一个段落&lt;/</span>p&gt;</div><div class="line">&lt;<span class="regexp">/div&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;script&gt;</span></div><div class="line"><span class="regexp">var para=document.createElement("p");/</span><span class="regexp">/这段代码创建新的 &lt;p&gt; 元素</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">/</span><span class="regexp">/如需向 p元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：</span></div><div class="line"><span class="regexp">var node=document.createTextNode("这是新段落。");</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">/</span><span class="regexp">/然后您必须向 p 元素追加这个文本节点</span></div><div class="line"><span class="regexp">para.appendChild(node);</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">/</span><span class="regexp">/最后您必须向一个已有的元素追加这个新元素。</span></div><div class="line"><span class="regexp">/</span><span class="regexp">/这段代码找到一个已有的元素：</span></div><div class="line"><span class="regexp">var element=document.getElementById("div1");</span></div><div class="line"><span class="regexp">/</span><span class="regexp">/这段代码向这个已有的元素追加新元素：</span></div><div class="line"><span class="regexp">element.appendChild(para);</span></div><div class="line"><span class="regexp">&lt;/</span>script&gt;</div><div class="line"></div><div class="line">&lt;<span class="regexp">/body&gt;</span></div><div class="line"><span class="regexp">&lt;/</span>html&gt;</div></pre></td></tr></table></figure>
</li>
<li><p>删除已有的 HTML 元素<br>如需删除 HTML 元素，您必须首先获得该元素的父元素：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;body&gt;</div><div class="line"></div><div class="line">&lt;div id=<span class="string">"div1"</span>&gt;</div><div class="line">&lt;p id=<span class="string">"p1"</span>&gt;这是一个段落&lt;<span class="regexp">/p&gt;</span></div><div class="line"><span class="regexp">&lt;p id="p2"&gt;这是另一个段落&lt;/</span>p&gt;</div><div class="line">&lt;<span class="regexp">/div&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;div id="div1"&gt;</span></div><div class="line"><span class="regexp">&lt;p id="p1"&gt;这是一个段落。&lt;/</span>p&gt;</div><div class="line">&lt;p id=<span class="string">"p2"</span>&gt;这是另一个段落。&lt;<span class="regexp">/p&gt;</span></div><div class="line"><span class="regexp">&lt;/</span>div&gt;</div><div class="line"></div><div class="line">&lt;script&gt;</div><div class="line"><span class="keyword">var</span> parent=<span class="built_in">document</span>.getElementById(<span class="string">"div1"</span>);</div><div class="line"><span class="keyword">var</span> child=<span class="built_in">document</span>.getElementById(<span class="string">"p1"</span>);</div><div class="line">parent.removeChild(child);</div><div class="line">&lt;<span class="regexp">/script&gt;</span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp">&lt;/</span>body&gt;</div><div class="line">&lt;<span class="regexp">/html&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<p>JavaScript相关：<br>页面渲染是啥？</p>
<blockquote>
<p>简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：</p>
<ol>
<li>用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；</li>
<li>浏览器开始载入html代码，发现&lt;head&gt;标签内有一个&lt;link&gt;标签引用外部CSS文件；<br>浏览器又发出CSS文件的请求，服务器返回这个CSS文件；</li>
<li>浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；</body></li>
<li>浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面 的代码；</li>
<li>服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；</li>
<li>浏览器发现了一个包含一行Javascript代码的&lt;script&gt;标签，赶快运行它；</li>
<li>Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个元素。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；<br>终于等到了&lt;/html&gt;的到来，浏览器泪流满面……</li>
<li>等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下&lt;link&gt;标签的CSS路径；</li>
<li>浏览器召集了在座的各位&lt;div&gt;&lt;span&gt;&lt;ul&gt;&lt;li&gt;们，“大伙儿收拾收拾 行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。</li>
</ol>
</blockquote>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/blog/tags/读书笔记/" rel="tag"># 读书笔记</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/blog/2017/10/10/算法学习之动态规划（二）/" rel="next" title="动态规划（二）">
                <i class="fa fa-chevron-left"></i> 动态规划（二）
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/blog/2017/10/26/effective java note/" rel="prev" title="effective java笔记">
                effective java笔记 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <!--PC版-->
<div id="SOHUCS" ></div>


    

  </div>
     <div class="comments" id="comments">
       
     </div>
   





        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/blog/images/avatar.gif"
               alt="choichumgming" />
          <p class="site-author-name" itemprop="name">choichumgming</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/blog/archives/">
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/blog/categories/index.html">
                <span class="site-state-item-count">5</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              
                <span class="site-state-item-count">6</span>
                <span class="site-state-item-name">标签</span>
              
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="http://www.weibo.com/u/2558763801" target="_blank" title="微博">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                    
                      微博
                    
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#JavaScript-Note"><span class="nav-number">1.</span> <span class="nav-text">JavaScript Note</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript是什么"><span class="nav-number">1.1.</span> <span class="nav-text">JavaScript是什么</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript可以做什么"><span class="nav-number">1.2.</span> <span class="nav-text">JavaScript可以做什么</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript-怎么使用"><span class="nav-number">1.3.</span> <span class="nav-text">JavaScript 怎么使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript-语句"><span class="nav-number">1.4.</span> <span class="nav-text">JavaScript 语句</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript-数据类型"><span class="nav-number">1.5.</span> <span class="nav-text">JavaScript 数据类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript-对象"><span class="nav-number">1.6.</span> <span class="nav-text">JavaScript 对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript-函数"><span class="nav-number">1.7.</span> <span class="nav-text">JavaScript 函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript-变量"><span class="nav-number">1.8.</span> <span class="nav-text">JavaScript 变量</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#局部-JavaScript-变量"><span class="nav-number">1.8.1.</span> <span class="nav-text">局部 JavaScript 变量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-变量的生存期"><span class="nav-number">1.8.2.</span> <span class="nav-text">JavaScript 变量的生存期</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#向未声明的-JavaScript-变量来分配值"><span class="nav-number">1.8.3.</span> <span class="nav-text">向未声明的 JavaScript 变量来分配值</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript-表单验证"><span class="nav-number">1.9.</span> <span class="nav-text">JavaScript 表单验证</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript-HTML-DOM"><span class="nav-number">1.10.</span> <span class="nav-text">JavaScript HTML DOM</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#如何查找-HTML-元素"><span class="nav-number">1.10.1.</span> <span class="nav-text">如何查找 HTML 元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何改变-HTML-元素的内容-innerHTML"><span class="nav-number">1.10.2.</span> <span class="nav-text">如何改变 HTML 元素的内容 (innerHTML)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何改变-HTML-元素的样式-CSS"><span class="nav-number">1.10.3.</span> <span class="nav-text">如何改变 HTML 元素的样式 (CSS)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何对-HTML-DOM-事件对做出反应"><span class="nav-number">1.10.4.</span> <span class="nav-text">如何对 HTML DOM 事件对做出反应</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何添加或删除-HTML-元素"><span class="nav-number">1.10.5.</span> <span class="nav-text">如何添加或删除 HTML 元素</span></a></li></ol></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">choichumgming</span>

  
</div>


  <div class="powered-by">
    由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
  </div>

  <span class="post-meta-divider">|</span>

  <div class="theme-info">
    主题 &mdash;
    <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
      NexT.Gemini
    </a>
  </div>


        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/blog/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.2"></script>



  
  


  <script type="text/javascript" src="/blog/js/src/affix.js?v=5.1.2"></script>

  <script type="text/javascript" src="/blog/js/src/schemes/pisces.js?v=5.1.2"></script>



  
  <script type="text/javascript" src="/blog/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/blog/js/src/post-details.js?v=5.1.2"></script>



  


  <script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  




  
    <script type="text/javascript">
    (function(){
      var appid = 'cytnT5dky';
      var conf = '56c170b7352bd027682e3707e9eb5071';
      var width = window.innerWidth || document.documentElement.clientWidth;
      if (width < 960) {
      window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){
        window.changyan.api.config({appid:appid,conf:conf})});
      }
    })();
    </script>
    <script type="text/javascript" src="https://assets.changyan.sohu.com/upload/plugins/plugins.count.js"></script>
  





  





  

  

  

  

  

  

</body>
</html>
